<template>
  <br>查询控件<br>
  moduleId ： {{moduleId}} —— 列数<br>
  quickFind ： {{quickFind}} —— <br>
  allFind ： {{allFind}} —— <br>
  customer ： {{customer}} —— <br>
  customerDefault ： {{customerDefault}} —— <br>
  reload ： {{reload}} —— <br>
  $attrs ： {{$attrs}} —— <br>
 

  <el-row :gutter="20">
    <el-col :span="6"
      style="border:1px solid #ddd"
      v-for="(item, index) in itemMeta" :key="index"
    >
      <find-item v-bind="item"/>
    </el-col>
  </el-row>
</template>

<script lang="ts">

  import { defineComponent, reactive, ref  } from 'vue'
  import { ElRow, ElCol } from 'element-plus'
  import type { Ref } from 'vue'

  import findItem from './30-find-item.vue'

  import { findProps } from '../../../lib/find/props-find'


  /** 只能传入字符串类型的数组 */
  function foo<T extends Array<string>>(arg: T): T {
    console.log(arg.length)
    return arg
  }

  /** 必须传入对象 */
  function foo2<T extends keyof 'name'>(arg: T): T {
    console.log(arg)
    return arg
  }

  export default defineComponent({
    name: 'ui-core-form-comp',
    components: {
      ElRow, ElCol,
      findItem
    },
    props: {
      ...findProps
    },
    setup(props) {
      console.log('查询组件的 props：', props)

      foo(['2','3','4'])

      foo2(['2','3','4'])
      foo2(2)
      foo2(() => {})
      foo2({name: '222'})

      const year: Ref<string | number> = ref('2020')

      year.value = 2020 // 成功！

      // 或者 在调用 ref() 时传入一个泛型参数
      const year2 = ref<string | number>('2020')
      year2.value = 2020 // 成功！

      /** book的说明 */
      interface Book {
        /** title 的说明 */
        title: string
        /** year 的说明 */
        year?: number
      }

      const book: Book = reactive({ title: 'Vue 3 指引' })
      console.log('查询组件的 props：', book)
      const book2 = reactive<Book>({ title: 'Vue 3 指引' })
      console.log('查询组件的 props：', book2)

      return {
        year,
        year2,
        props
      }
    }
  })

</script>